<%--
  Created by IntelliJ IDEA.
  User: 70481
  Date: 2019/9/10
  Time: 19:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>轮播图管理</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="myTable" lay-filter="myTable" class="layui-hide"></table>


<form class="layui-form" action="" id="myForm" lay-filter="myForm" style="display: none;" method="post" enctype="multipart/form-data">
    <%--隐藏输入框--%>
    <input type="hidden" name="guruId" id="hidd" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">大师名称</label>
        <div class="layui-input-block">
            <input type="text" name="guruName" lay-verify="required" lay-reqtext="这是必填项，不能为空!  " placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">大师法号</label>
        <div class="layui-input-block">
            <input type="text"  name="guruNickname" lay-verify="required" lay-reqtext="这是必填项，不能为空!  " placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">大师头像</label>
        <div class="layui-input-block">
            <input type="file" id="fileImg" name="guruImg" lay-verify="required" lay-reqtext="这是必填项，不能为空!  " placeholder="请上传" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label"></label>
        <div>
            <img src="" width="120px"  height="100px" id="myImg">
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="submission">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<form class="layui-form" action="" id="updateForm" lay-filter="updateForm" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">是否封杀</label>
        <div class="layui-input-block">
            <input type="radio" name="guruStatus" value="0" title="是">
            <input type="radio" name="guruStatus" value="1" title="否">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn"  lay-filter="update">是</button>
            <button type="reset" class="layui-btn layui-btn-primary">否</button>
        </div>
    </div>
</form>

<form class="layui-form" action="" id="multiForm" lay-filter="multiForm" style="display: none;" method="post" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">请选择数据文件</label>
        <div class="layui-input-block">
            <input type="file" id="file" name="file" lay-verify="required" lay-reqtext="这是必填项，不能为空!  " placeholder="请上传" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="multi">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script type="text/javascript">
    //加载需要的模块
    layui.use(["table","form","layer"],function () {
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;

        // 初始化表格
        table.render({
            elem:"#myTable",
            url:"${pageContext.request.contextPath}/guru/selectGuruPage",
            page:true,
            toolbar:"#barDemo",
            defaultToolbar:[],
            cols:[[
                // 每一个大括号代表一行数据
                {checkbox:"checkbox"},
                {title:"编号",field:"guruId",width:40},
                {title:"大师名字",field:"guruName"},
                {title:"大师头像",field:"guruImage",templet: '#bannerImg'},
                {title:"大师法号",field:"guruNickname"},
                {title:"状态",field:"bannerTime",templet: '#bannerStare'},
                {title:"操作",templet:"#os"}
            ]]
        })

        // 头监听

        table.on("toolbar(myTable)",function (obj) {
            $("#myForm")[0].reset();
            $("#myImg").prop("sec","")
            if(obj.event==="add"){
                layer.open({
                    type: 1,
                    offset: "t",
                    anim: 1,
                    area:'600px',
                    content: $("#myForm")
                })
            }else if(obj.event==="multiAdd"){
                layer.open({
                    type: 1,
                    offset: "t",
                    anim: 1,
                    area:'600px',
                    content: $("#multiForm")
                })
            }else{
                // 下载
               window.location="${pageContext.request.contextPath}/guru/exportGuru"
            }


        })


        // form监听
        form.on("submit(submission)",function(data){
            // alert(234)
            var formData = new FormData(document.getElementById("myForm"));
            console.log(formData.get("bannerOldName"))

            if($("#hidd").val()===""){
                $.ajax({
                    url:"${pageContext.request.contextPath}/guru/insertGuru",
                    type:"post",
                    data:formData,
                    async:false,
                    cache:false,
                    processData:false,
                    contentType:false,
                    success:function(data){
                        layer.alert(data.isInsert,{time:1250})
                        layer.closeAll("page")
                        table.reload("myTable")
                    }
                })
            }else{
                $.ajax({
                    url:"${pageContext.request.contextPath}/guru/updateGuru",
                    type:"post",
                    data:formData,
                    async:false,
                    cache:false,
                    processData:false,
                    contentType:false,
                    success:function(data){
                        layer.alert(data.isUpdate,{time:1250})
                        layer.closeAll("page")
                        table.reload("myTable")
                    }
                })

            }
            return false;
        })

        // 监听seitch开关
        form.on('switch(switchTest)', function(data){
          /*  alert(12)
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //开关是否开启，true或者false
            console.log(data.value); //开关value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象*/
            var par = data.elem
            // alert($(par).prop("name"))
            var guruId = $(par).prop("name");
           $.ajax({
               url:"${pageContext.request.contextPath}/guru/updateGuru",
               data:{"guruId":guruId,"guruStatus":data.value},
               success:function(data){
                    layer.alert(data.isInsert,{time:1250})
                    table.reload("myTable")
               }
           })
        });


        form.on("submit(multi)",function (data) {
            var formData = new FormData(document.getElementById("multiForm"));
            $.ajax({
                url:"${pageContext.request.contextPath}/guru/MultiInsert",
                type:"post",
                data:formData,
                async:false,
                cache:false,
                processData:false,
                contentType:false,
                success:function (data) {
                    layer.msg(data.success,{time:1250})
                    table.reload("myTable")
                }
            })
        })

    })

    //建立一個可存取到该file的url  用于文件上传的图片回显
    function getObjectURL(file) {
        var url = null ;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    $("#fileImg").change(function () {
        var objurl = getObjectURL(this.files[0])
        if (objurl) {
            $("#myImg").attr("src", objurl)
        }
    })



</script>

<script type="text/html" id="bannerImg">
    <img src="${pageContext.request.contextPath}/{{d.guruImage}}" width="100%" height="100%">
</script>

<script type="text/html" id="bannerStare">
    {{#  if(d.guruStatus == 1){ }}
    正常
    {{#  } else { }}
    <span style="color: red">冻结</span>
    {{#  } }}
</script>

<%--表头信息--%>
<script type="text/html" id="barDemo">
    <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="add">
        <i class="layui-icon layui-icon-add-circle-fine"></i>添加大师</button>
    <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="multiAdd">
        <i class="layui-icon layui-icon-add-circle-fine"></i>批量添加</button>
    <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="export">
        <i class="layui-icon layui-icon-download-circle"></i>导出表单</button>
</script>

<script type="text/html" id="os">
    <%--<button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="update" id="update" onclick="update('{{d.guruId}}')">
        <i class="layui-icon layui-icon-util"></i>更改</button>--%>
    {{#  if(d.guruStatus == 1){ }}
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">是否封杀</label>
        <div class="layui-input-block">
            <input type="checkbox"  checked name="{{d.guruId}}" value="0" lay-skin="switch" lay-filter="switchTest" title="是" lay-text="开启|封杀">
        </div>
    </div>
    {{#  } else { }}
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">是否封杀</label>
        <div class="layui-input-block">
            <input type="checkbox"  name="{{d.guruId}}" value="1" lay-skin="switch" lay-filter="switchTest" title="否" lay-text="开启|封杀">
        </div>
    </div>
    {{#  } }}
</script>


</html>
